<template>
  <div class="dl-picker-container">
    <u-popup :show="value" mode="bottom" :closeOnClickOverlay="true" @close="$emit('close')" :overlayStyle="{ zIndex: 10075 }" :custom-style="{ zIndex: 10076 }">
      <view class="picker-operate-container">
        <view class="operate-box" v-if="isMultiple">
          <text class="cancel" @tap="$emit('close')">取消</text>
          <text class="confirm" @tap="comfirm">确认</text>
        </view>
      </view>
      <view class="tree-container">
        <template v-if="isMultiple">
          <scroll-view scroll-y="true" style="height: 90%">
            <u-checkbox-group placement="column">
              <view class="checkbox-item" @tap="checkAllItem">
                <span>
                  <text class="label"><u-checkbox :checked="isAllCheck" :size="30" @change="checkAllItem" />全选</text>
                  <text class="value" v-if="checkeNum">{{ checkedNum }}/{{ currentPickerData.length }}</text>
                </span>
                <view class="sub" v-if="currentLevelArr.length" @tap.stop="tapSuperior()">上一级</view>
              </view>
              <view class="checkbox-item" v-for="item in currentPickerData" :key="item[nodeKey]" @tap="chooseItem(item)">
                <text class="label"><u-checkbox :size="30" :checked="item.checked" :name="item[nodeKey]" @change="chooseItem(item)" />{{ item[name] }}</text>
                <view class="sub" v-if="item.isHadSub" @tap.stop="tapSubItem(item)">下级</view>
              </view>
            </u-checkbox-group>
          </scroll-view>
        </template>
        <template v-else>
          <scroll-view scroll-y="true" style="height: 90%">
            <view class="checkbox-item" v-if="currentLevelArr.length">
              <view class="sub" @tap.stop="tapSuperior()">上一级</view>
            </view>
            <view class="checkbox-item" v-for="item in currentPickerData" :key="item[nodeKey]" @tap="chooseItem(item)">
              <text class="label"><text v-if="defaultChecked.length && item[nodeKey] === defaultChecked[0]" class="checked">✔</text>{{ item[name] }}</text>
              <view class="sub" v-if="item.isHadSub" @tap.stop="tapSubItem(item)">下级</view>
            </view>
          </scroll-view>
        </template>
      </view>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: 'DlPicker',
  data() {
    return {
      currentPickerData: [],
      allPickerData: [],
      isAllCheck: false,
      checkedNum: 0,
      currentLevelArr: []
    }
  },
  props: {
    value: Boolean,
    isMultiple: {
      type: Boolean,
      default: false
    },
    action: {
      type: Function,
      default: () => {}
    },
    defaultChecked: {
      type: Array,
      default: () => []
    },
    name: {
      type: String,
      default: 'name'
    },
    nodeKey: {
      type: String,
      default: 'id'
    }
  },
  watch: {
    value: {
      handler() {
        this.currentPickerData = []
        this.getPickerData()
      }
    }
  },
  methods: {
    getPickerData() {
      let id = this.currentLevelArr.length ? this.currentLevelArr[this.currentLevelArr.length - 1][this.nodeKey] : null
      this.action(id)
        .then(data => {
          this.currentPickerData = data.map(item => {
            return { ...item, checked: this.defaultChecked.includes(item[this.nodeKey]) }
          })
        })
        .finally(() => {
          let arr = this.currentPickerData.filter(item => this.defaultChecked.includes(item[this.nodeKey]) && !this.allPickerData.map(i => i[this.nodeKey]).includes(item[this.nodeKey]))
          this.allPickerData = [...this.allPickerData, ...arr]
          this.currentPickerData.forEach(item => (item.checked = this.allPickerData.map(i => i[this.nodeKey]).includes(item[this.nodeKey])))
          this.isAllCheck = this.currentPickerData.every(item => item.checked)
        })
    },
    checkAllItem() {
      this.isAllCheck = !this.isAllCheck
      this.currentPickerData.forEach(item => (item.checked = this.isAllCheck))
      //  点击全选时
      if (this.currentPickerData.every(item => item.checked)) {
        for (let i = 0; i < this.currentPickerData.length; i++) {
          const idArr = this.allPickerData.map(item => item[this.nodeKey])
          const bool = !idArr.includes(this.currentPickerData[i][this.nodeKey])
          if (bool) this.allPickerData.push(this.currentPickerData[i])
        }
      } else {
        for (let i = 0; i < this.currentPickerData.length; i++) {
          const index = this.allPickerData.findIndex(item => item[this.nodeKey] === this.currentPickerData[i][this.nodeKey])
          if (index > -1) this.allPickerData.splice(index, 1)
        }
      }
    },
    chooseItem(val) {
      if (this.isMultiple) {
        this.currentPickerData.forEach(item => val[this.nodeKey] === item[this.nodeKey] && (item.checked = !item.checked))
        // 点击单个时
        const obj = this.currentPickerData.find(item => item[this.nodeKey] === val[this.nodeKey])
        const bool = this.allPickerData.includes(obj[this.nodeKey])
        if (bool) {
          if (!obj.checked) {
            const index = this.allPickerData.findIndex(item => item[this.nodeKey] === obj[this.nodeKey])
            if (index > -1) this.allPickerData.splice(index, 1)
          }
        } else {
          if (obj.checked) {
            this.allPickerData.push(obj)
          } else {
            const index = this.allPickerData.findIndex(item => item[this.nodeKey] === obj[this.nodeKey])
            if (index > -1) this.allPickerData.splice(index, 1)
          }
        }
        this.isAllCheck = this.currentPickerData.every(item => item.checked)
      } else {
        this.$emit('getComfirmResult', val)
      }
    },
    tapSubItem(val) {
      if (this.isMultiple) {
        this.isAllCheck = false
        this.currentPickerData.forEach(item => (item.checked = false))
      }

      this.currentLevelArr.push(val)
      this.getPickerData()
    },
    tapSuperior() {
      if (this.isMultiple) {
        this.isAllCheck = false
        this.currentPickerData.forEach(item => (item.checked = false))
      }

      this.currentLevelArr.splice(this.currentLevelArr.length - 1, 1)
      this.getPickerData()
    },
    comfirm() {
      this.$emit('getComfirmResult', this.allPickerData)
    }
  }
}
</script>

<style lang="scss">
.dl-picker-container {
  .operate-box {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    padding: 20rpx;
    border-bottom: 2rpx solid #ccc;
    .cancel {
      color: #c0c4cc;
    }
    .confirm {
      color: #1890ff;
    }
  }
  .tree-container {
    height: 500rpx;
    padding: 0rpx 20rpx 40rpx 20rpx;
    box-sizing: border-box;
  }
  .checkbox-item {
    height: 80rpx;
    border-bottom: 2rpx solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    font-size: 30rpx;
    .label {
      color: #333;
      display: flex;
    }
    .value {
      color: #9e9e9e;
    }
    .sub::before {
      content: '';
      padding: 1rpx 1rpx;
      box-sizing: border-box;
      background: #1890ff;
      margin-right: 8rpx;
    }
    .sub {
      color: #1890ff;
    }
  }
  .checked {
    color: #1890ff;
    margin-right: 8rpx;
  }
}
</style>
